import { APICartList } from '..//fetch.js';
import { getCookie, ajax } from '../tools.js';
$('#head').load('../dewu/head.html');
$('#foot').load('../dewu/foot.html');

const KEY = '3sh6rl1vbdgmhn00';
const CITYAPI = 'http://api.yytianqi.com/citylist/id/2';

ajax({
  path: CITYAPI,
  success: ({ list }) => {
    console.log(list);
    var temp = [];
    for (var i = 0; i < 4; i++) {
      temp.push(list.shift());
    }
    var zxs = {
      city_id: "CH99",
      name: "直辖市",
      list: temp
    }
    temp = [];
    for (var i = 0; i < 3; i++) {
      temp.push(list.pop());
    }
    var tw = temp.shift();
    var xzq = {
      city_id: "CH98",
      name: "特别行政区",
      list: temp
    }
    var provinceList = [zxs, xzq, tw, ...list];
    console.log(provinceList);

    var html = '<option value="">请选择省份</option>';
    provinceList.forEach(({ city_id, name }) => {
      html += `<option value="${city_id}">${name}</option>`
    })
    $('#province').html(html)

    $('#province').change(function () {
      // console.log(this.value);
      var provinceId = this.value;
      var [province] = provinceList.filter(({ city_id }) => city_id === provinceId);
      console.log(province);

      var cityList = province.list;
      var html = '<option value="">请选择市</option>';
      cityList.forEach(({ city_id, name }) => {
        html += `<option value="${city_id}">${name}</option>`
      })
      $('#city').html(html)
      $('#city').off().change(function(){
        var cityId = this.value;
        var [city] = cityList.filter(({ city_id }) => city_id === cityId);
        // console.log(city);
  
        var areaList = city.list;
        var html = '<option value="">请选择区</option>';
        areaList.forEach(({ city_id, name }) => {
          html += `<option value="${city_id}">${name}</option>`
        })
        $('#area').html(html)
      })
     
    })
    
  }
})


//  console.log( $('#province option:selected').text())

// var stl=$('#province')
// stl.on('change',function(){
//   var checkText=$("#province'").find("option:selected").text(); //获取Select选择的Text 
//   var checkValue=$("#province'").val();
//   console.log(checkText +"~~~~"+ checkValue);
// });



$('.layui-btn').click(function () {
  beijing.style.display = 'block';

  $('#province').on('click',function(){

    var prov=$('#province option:selected').text()
    console.log(prov);
    
  })
  
  $('#city').on('click',function(){

    var city=$('#city option:selected').text()
    console.log(city)
  })
  $('#area').on('click',function(){

    var area=$('#area option:selected').text()
    console.log(area)
  })
})
$('.btn').click(function () {
  beijing.style.display = 'none'
})

layui.use(['layer'], function () {
  var layer = layui.layer;

  var username = getCookie('login_user');

  APICartList({
    username
  }).then(({ data }) => {

    var html = '';
    $.each(data, (index, { id, img, gname, price, count }) => {
      // console.log(data);
      html += `
          <tr data-id = ${id}>
          <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
          <td class="goods"><img src="${img}" alt="" /><span>${gname}</span></td>
          <td class="price">${price}</td>
          <td class="count"><span class="reduce">${count > 1 ? '-' : ''}</span>
              <input class="count-input" type="text" value="${count}" />
              <span class="add">+</span></td>
          <td class="subtotal">${(price * count).toFixed(2)}</td>
          <td class="operation"><span class="delete">删除</span></td>
      </tr>
          `
    })
    $('#list').html(html)
  })

  // 全选

  $('.check-all').change(function () {
    $('.check-one').prop('checked', $(this).prop('checked'))
    getTotal()
  })
  // 单选
 
  $(document).on('click', '.check-one', function () {
    checkAll();

  })
  function checkAll() {
    if ($('.check-one').length === $('.check-one:checked').length) {
      $('.check-all').prop('checked', true)
    } else {
      $('.check-all').prop('checked', false)
    }
    getTotal()
  }
})
function getTotal() {
  var count = 0;
  var total = 0;
  $.each($('.check-one:checked'), function (_, item) {
    count += $(this).parents('tr').find('.count-input').val() * 1
    total += $(this).parents('tr').find('.subtotal').text() * 1
  });

  $('#selectedTotal').text(count);



  $('#priceTotal').text(total);
}